<template>
	<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">

		<!-- 标题 -->
		<text style="width: 702rpx; font-size: 34rpx;color: #333333;margin-top: 40rpx;">东风悦达起亚K3正式上市</text>

		<!-- 日期和浏览量 -->
		<view style="width: 702rpx; display: flex;justify-content: space-between;margin-top: 30rpx;">
			<!-- 日期 -->
			<text style="font-size: 22rpx;color: #666666;">2021-01-14</text>
			<!-- 浏览量 -->
			<view style="display: flex;justify-content: center;align-items: center;">
				<image mode="aspectFill" src="../static/jiaolian_tuandui.png" style="width: 17rpx;height: 12rpx;margin-right: 10rpx;"></image>
				<text style="font-size: 18rpx;color: #666666;">1002</text>
			</view>

		</view>

		<!-- 富文本 -->
		<rich-text :nodes="context.wonderful_moment" style="width: 702rpx; margin-top: 35rpx;"></rich-text>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				/**
				 * id	文章id
				 * post_title	文章标题
				 * published_time	发布时间
				 * thumbnail	缩略图
				 * wonderful_moment	详情内容
				 * post_hits	查看数
				 * post_source	作者
				 * post_excerpt	摘要
				 */
				context: {
					id: '',
					post_title: '',
					published_time: '',
					thumbnail: '',
					wonderful_moment: '',
					post_excerpt: '',
					post_hits: '',
					post_source: ''
				}
			}
		},
		onLoad() {
			// this.id = this.$Route.query.id;
			this.getContext(this.$Route.query.id);

		},
		methods: {
			// 获取文章数据
			async getContext(id) {
				let res;
				try {
					res = await this.$request.get("/addons/shopro/goods/detail", {
						data: {
							id: id
						}
					});
				} catch (e) {
					//TODO handle the exception
					return uni.showToast({
						title: "网络连接失败！",
						icon: "none"
					});
				}

				console.log('res获取文章数据', res);
				this.context = res.data.data;

			}
		}
	}
</script>

<style>

</style>
